ANTOOZA-FRONTEND/app/(main)/watch/[identifier]/donation-modal.scss

.donation-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;

	&__overlay {
		position: absolute;
		inset: 0;
		background: var(--overlay-color);
	}

	&__box {
		position: relative;
		width: 100%;
		max-width: 640px;
		max-height: 90vh;
		display: flex;
		flex-direction: column;
		background: var(--bg-page);
		color: var(--text-primary);
		border: 1px solid var(--border-strong);
		border-radius: 12px;
		padding: 0;
		overflow: hidden;
		box-shadow: 0 12px 32px var(--shadow-color);

		// Tablet — letterbox 줄임
		@media (max-width: 768px) and (min-width: 641px) {
			max-width: 600px;
		}

		// Mobile / sm — full screen modal
		@media (max-width: 640px) {
			max-width: 100%;
			max-height: 100%;
			height: 100dvh;
			border-radius: 0;
			border: none;
		}
	}

	&__body {
		flex: 1;
		overflow-y: auto;
		padding: 20px 24px;

		&::-webkit-scrollbar {
			width: 6px;
		}

		&::-webkit-scrollbar-thumb {
			background: var(--border-strong);
			border-radius: 3px;
		}

		@media (max-width: 640px) {
			padding: 16px;
		}
	}

	&__label {
		display: block;
		font-size: 0.9375rem;
		font-weight: 500;
		margin-bottom: 6px;
		color: var(--text-primary);
	}

	// 시그니처 이미지 그리드
	&__signatures {
		margin-bottom: 16px;
	}

	&__signature-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 8px;
		max-height: 280px;
		overflow-y: auto;
		padding: 4px;

		@media (max-width: 768px) {
			grid-template-columns: repeat(3, 1fr);
		}

		@media (max-width: 640px) {
			grid-template-columns: repeat(2, 1fr);
			max-height: 220px;
		}

		&::-webkit-scrollbar {
			width: 6px;
		}

		&::-webkit-scrollbar-thumb {
			background: var(--border-strong);
			border-radius: 3px;
		}
	}

	&__signature {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		padding: 6px;
		border: 2px solid var(--border-default);
		border-radius: 8px;
		background: var(--bg-subtle);
		color: var(--text-primary);
		cursor: pointer;
		transition: all 0.15s;

		&:hover {
			border-color: var(--color-donate);
		}

		&--active {
			border-color: var(--color-donate);
			background: var(--sidebar-active-bg);
		}
	}

	&__signature-img {
		width: 100%;
		aspect-ratio: 1 / 1;
		object-fit: contain;
		background: var(--bg-page);
		border-radius: 6px;
	}

	&__signature-amount {
		font-size: 0.75rem;
		font-weight: 600;
		color: var(--text-primary);
	}

	&__signature-sentinel {
		grid-column: 1 / -1;
		height: 1px;
	}

	&__signature-loading {
		grid-column: 1 / -1;
		text-align: center;
		padding: 8px;
		font-size: 0.75rem;
		color: var(--text-muted);
	}

	&__header {
		flex-shrink: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 16px;
		background: var(--bg-head);
		color: var(--text-normal);
	}

	&__title {
		font-size: 1.125rem;
		font-weight: 700;
		margin: 0;
		color: var(--text-normal);
	}

	&__close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		background: transparent;
		border: none;
		border-radius: 4px;
		font-size: 1.25rem;
		line-height: 1;
		cursor: pointer;
		color: var(--text-normal);
		transition: background 0.15s;

		&:hover {
			background: rgba(255, 255, 255, 0.15);
			color: var(--text-normal);
		}
	}

	&__field {
		margin-bottom: 16px;

		> label {
			display: block;
			font-size: 0.9375rem;
			font-weight: 500;
			margin-bottom: 6px;
			color: var(--text-primary);
		}

		> input, > textarea {
			width: 100%;
			padding: 8px 12px;
			border: 1px solid var(--border-default);
			border-radius: 6px;
			font-size: 0.875rem;
			background: var(--bg-input);
			color: var(--text-primary);
			resize: none;

			&::placeholder {
				color: var(--text-muted);
			}

			&:disabled {
				background: var(--bg-subtle);
				color: var(--text-muted);
				cursor: not-allowed;
			}
		}
	}

	&__label-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 6px;
		gap: 8px;

		> label {
			margin: 0;
			font-size: 0.9375rem;
			font-weight: 500;
			color: var(--text-primary);
		}
	}

	&__anon-toggle {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-size: 0.875rem;
		color: var(--text-secondary);
		cursor: pointer;
		user-select: none;

		> input[type="checkbox"] {
			margin: 0;
			width: 18px;
			height: 18px;
			cursor: pointer;
			accent-color: var(--color-donate);
		}
	}

	&__balance {
		font-size: 0.8125rem;
		font-weight: 600;
		color: var(--color-blue);
		font-variant-numeric: tabular-nums;
	}

	&__msg-counter {
		font-size: 0.75rem;
		color: var(--text-muted);
		font-variant-numeric: tabular-nums;

		&--max {
			color: var(--color-danger);
			font-weight: 600;
		}
	}

	&__presets {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin-top: 8px;
	}

	&__preset {
		padding: 6px 12px;
		border: 1px solid var(--border-default);
		border-radius: 20px;
		background: var(--bg-subtle);
		color: var(--text-primary);
		font-size: 0.8125rem;
		cursor: pointer;
		transition: all 0.15s;

		&:hover {
			border-color: var(--color-donate);
		}

		&--active {
			background: var(--color-donate);
			color: #fff;
			border-color: var(--color-donate);
		}
	}

	// 크루원 선택
	&__crew {
		margin-bottom: 16px;
		padding: 12px;
		background: var(--bg-subtle);
		border: 1px solid var(--border-default);
		border-radius: 8px;
	}

	&__crew-label {
		display: block;
		font-size: 0.9375rem;
		font-weight: 500;
		margin-bottom: 8px;
		color: var(--text-primary);
	}

	&__crew-tag {
		display: inline-block;
		padding: 2px 8px;
		background: var(--sidebar-active-bg);
		color: var(--color-donate);
		border-radius: 4px;
		font-size: 0.75rem;
		font-weight: 600;
		margin-left: 4px;
	}

	&__crew-list {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	&__crew-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		padding: 8px 12px;
		border: 2px solid var(--border-default);
		border-radius: 8px;
		background: var(--bg-page);
		color: var(--text-primary);
		cursor: pointer;
		font-size: 0.75rem;
		min-width: 72px;
		transition: all 0.15s;

		&:hover {
			border-color: var(--color-donate);
		}

		&--active {
			border-color: var(--color-donate);
			background: var(--sidebar-active-bg);
		}

		> span {
			font-weight: 500;
			max-width: 64px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	&__crew-thumb {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		object-fit: cover;

		&--default {
			display: flex;
			align-items: center;
			justify-content: center;
			background: var(--bg-elevated);
			color: var(--text-secondary);
			font-size: 0.875rem;
			font-weight: 600;
		}
	}

	// 푸터
	&__footer {
		flex-shrink: 0;
		display: flex;
		gap: 12px;
		justify-content: center;
		padding: 12px 24px;
		border-top: 1px solid var(--border-default);
		background: var(--bg-page);

		@media (max-width: 640px) {
			padding: 12px 16px;
		}
	}

	&__btn {
		padding: 8px 20px;
		border-radius: 6px;
		font-size: 0.875rem;
		font-weight: 500;
		cursor: pointer;
		border: 1px solid var(--border-default);
		background: var(--bg-subtle);
		color: var(--text-primary);
		transition: all 0.15s;

		&:hover {
			background: var(--btn-default-hover);
		}

		&--primary {
			background: var(--color-donate);
			color: #fff;
			border-color: var(--color-donate);

			&:hover {
				background: var(--color-donate-hover);
				border-color: var(--color-donate-hover);
				opacity: 1;
			}

			&:disabled {
				opacity: 0.5;
				cursor: not-allowed;
			}
		}
	}

	// 완료 화면
	&__done {
		text-align: center;
		padding: 24px 0;
		color: var(--text-primary);
	}

	&__done-icon {
		font-size: 3rem;
		margin-bottom: 12px;
	}

	&__done-text {
		font-size: 1.1rem;
		font-weight: 600;
		margin-bottom: 20px;
		color: var(--text-primary);
	}
}